<template>
    <div>
        <div style="display:flex;justify-content: space-between;">
            <div class="document-right-header-right-switch">
                     <div :class="[switchType == 'chart'?'switch-bg':'']" class="document-right-header-right-switch-itemTwo" @click="loadSwitch('chart')">
                    <span :class="[switchType == 'chart'?'':'switch-color']" class=" document-right-header-right-switch-item-title">月</span>
                    <!-- <i :class="[switchType == 'chart'?'':'switch-color']"
								class="iconfont icon-lietu document-right-header-right-switch-item-title"></i> -->
                </div>

                <div :class="[switchType == 'list'?'switch-bg':'']" class="document-right-header-right-switch-item" @click="loadSwitch('list')">
                    <span :class="[switchType == 'list'?'':'switch-color']" class="document-right-header-right-switch-item-title">周</span>
                    <!-- <i :class="[switchType == 'list'?'':'switch-color']"
								class="iconfont icon-hang document-right-header-right-switch-item-title"></i> -->
                </div>

            </div>
            <div class="tips">
                <div class="tips_text">任务计划时间：</div>
                <div class="tips_color" style="  background-color: #E6A23C;"></div>
                <div class="tips_text">变更计划时间：</div>
                <div class="tips_color" style="  background-color: #f3d526;"></div>
                <div class="tips_text">实际完成时间：</div>
                <div class="tips_color" style="  background-color: #2BA245;"></div>
            </div>
        </div>
        <div v-if="dateType=='yearAndWeek'&&taskStartDate!=''&&taskEndDate!=''">
            <wlGantt ref="wlGantt" @expandchange='expandchange' :key="timer" :data="data" :start-date="taskStartDate" :end-date="taskEndDate" dateType='yearAndWeek'></wlGantt>
        </div>
        <div v-if="dateType=='yearAndMonth'&&taskStartDate!=''&&taskEndDate!=''">
            <wlGantt ref="wlGantt" @expandchange='expandchange' :key="timer" :data="data" :start-date="taskStartDate" :end-date="taskEndDate" dateType='yearAndMonth'></wlGantt>

        </div>
    </div>
</template>
<script>
import { ganttChart, modiTaskList,taskCycle } from "@/api/task";
import wlGantt from "../../views/app/wl-gantt";
// import wlGantt from './Gantt'
export default {
    props: ["form"],
    components: {
        wlGantt,
    },
    data() {
        return {
            data: [],
            array: [],
            dateType: "yearAndMonth",
            timer: null,
            switchType: "chart",
            // taskType: "",
            dataForEach: [],
            listQuery: {
                // current: 1,
                // size: 20,
                // parentId: undefined,
                // level: undefined,
                taskType: "",
                projId: "",
                masterUserId: "",
                status: "",
                matrix: "",
                name: "",
                taskTags: [],
            },
            taskStartDate:"",
            taskEndDate:"",
        };
    },
    watch: {
        form: {
            handler(val, oldval) {
                this.array = val;
            },
            // 深度观察监听
            deep: true,
            immediate: true,
        },
    },
    created() {
        this.listQuery.projId=this.$route.query.id
        this.taskCycleclick()

        this.array = this.form;
    },
    methods: {
        taskCycleclick(){
            let params= new URLSearchParams()
            params.append('projId',this.listQuery.projId)
            taskCycle(params).then(res=>{
                this.taskStartDate=res.data[0].startDate
                this.taskEndDate=res.data[0].endDate
                // this.taskEndDate='2022-11-30'
                // this.taskStartDate='2020-10-01'
                this.ganttChartclick();
            })
        },
        listTypedelect(){
             this.listQuery.taskType="",
            //  this.listQuery.projId="",
             this.listQuery.masterUserId="",
             this.listQuery.status="",
             this.listQuery.matrix="",
             this.listQuery.name="",
             this.listQuery.taskTags=[],
             this.ganttChartclick()
        },
        listTypeChange(listName,data){
            this.listQuery[listName]=data
            this.ganttChartclick()
        },
        childrenclick(data) {
            data.forEach((v) => {
                if (v.children != null) {
                    v.children.forEach((item) => {
                        this.$set(item, "background", v.background);
                        if (item.children != null) {
                            this.childrenclick(item);
                        }
                    });
                } else {
                    return data;
                }
            });
        },
        expandchange(taskId) {
            if (this.dataForEach.indexOf(taskId) != -1) return;
            this.dataForEach.push(taskId);
            let params = new URLSearchParams();
            params.append("taskId", taskId);
            modiTaskList(params).then((res) => {
                if (res.data.length > 0) {
                    res.data.forEach((val) => {
                        this.$set(val, "children", []);
                    });
                    this.addchildren(this.data, taskId, res);
                } else {
                    // this.$message({
                    //     message: "暂无变更记录！",
                    //     type: "warning",
                    // });
                }
            });
        },
        addchildren(taskList, taskId, res) {
            taskList.forEach((item) => {
                if (item.taskId == taskId) {
                    res.data.forEach((val) => {
                        val.taskId = val.taskId + "-Task";
                        val.taskId = val.taskId.concat(
                            Math.ceil(Math.random() * 100000000)
                        );
                        if (item.children) {
                            item.children.unshift(val);
                            item.children = this.unique(item.children);
                            this.$refs.wlGantt.wlGanttclick(taskId);
                        } else {
                            this.$set(item, "children");
                            item.children.unshift(val);
                            item.children = this.unique(item.children);
                        }
                    });
                } else {
                    if (item.children && item.children.length > 0) {
                        this.addchildren(item.children, taskId, res);
                        console.log(item.children);
                    }
                }
            });
        },
        unique(arr) {
            const res = new Map();
            return arr.filter(
                (arr) => !res.has(arr.taskId) && res.set(arr.taskId, 1)
            );
        },
        loadSwitch(data) {
            this.switchType = data;
            if (data == "list") {
                this.dateType = "yearAndWeek";
                this.timer = new Date().getTime();
                this.$forceUpdate();
            } else {
                this.dateType = "yearAndMonth";
                this.timer = new Date().getTime();
                this.$forceUpdate();
            }
        },
        // dateTypechangadd() {
        //     this.dateType = "yearAndWeek";
        //     this.timer = new Date().getTime();
        //     this.$forceUpdate();
        // },
        // dateTypechang() {
        //     this.dateType = "yearAndMonth";
        //     this.timer = new Date().getTime();
        //     this.$forceUpdate();
        // },

        statusclick(data) {
            this.listQuery.taskType = data;
            this.ganttChartclick();
        },
        ganttChartclick() {
            // let params = new URLSearchParams();
            // params.append("projId", this.$route.query.id);
            // params.append("taskType", this.listQuery.taskType);
            // params.append("projId", this.listQuery.projId);
            // params.append("masterUserId", this.listQuery.masterUserId);
            // params.append("status", this.listQuery.status);
            // params.append("matrix", this.listQuery.matrix);
            // params.append("taskTags", this.listQuery.taskTags);
            ganttChart(this.listQuery).then((res) => {
                this.data = res.data;
                this.data.forEach((item, index) => {
                    this.$set(item, "popoverShow", false);
                    if (item.workEndDate == null) {
                        item.workEndDate = "暂无";
                    }
                    if (item.workStartDate == null) {
                        item.workStartDate = "暂无";
                    }
                });

                // this.data.forEach((item, index) => {
                //     if (index % 2 == 0) {
                //         this.$set(item, "background", true);
                //     } else {
                //         this.$set(item, "background", false);
                //     }
                // });
                // this.childrenclick(this.data);
            });
        },
    },
};
</script>
 <style scoped>
.document-right-header-right-switch {
    width: 72px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.document-right-header-right-switch-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.switch-color {
    color: #677e9f !important;
}
.switch-bg {
    background-color: #677e9f;
    border-color: #677e9f;
}
.document-right-header-right-switch-item-title {
    font-size: 14px;
    color: white;
}
.tips {
    /* width: 100%; */
    /* text-align: end; */
    display: flex;
    align-items: center;
}
.tips_color {
    width: 50px;
    height: 15px;
    margin-right: 8px;
}
</style>
